import { useEffect, useState, useRef } from "react";
import styles from './style.less';

const draggingStyle = {
    opacity: 0.25,
};

export const Drag = (props) => {
    const {
        effectAllowed,

    } = props;


    const dragRef = useRef()
    const [isDragging, setIsDragging] = useState(false);
    const startDrag = ev => {
        setIsDragging(true);
        // 传输数据
        if (typeof (props.data) == 'object') {
            ev.dataTransfer.setData('data', JSON.stringify(props.data))
        } else {
            ev.dataTransfer.setData('data', props.data)
        }
        // 添加效果
        ev.dataTransfer.effectAllowed = effectAllowed;

    };

    const dragEnd = (ev) => {
        setIsDragging(false)
    }

    return (
        <div draggable ref={dragRef} onDragStart={startDrag} onDragEnd={dragEnd} style={isDragging ? draggingStyle : {}}>
            {props.children}
        </div>);
}


const defaultClass = {
    height: 8
}
export const DropTarget = (props) => {
    const {
        onDropped,
        onDrag,
        dragEnterClass,
        dropEffect,
    } = props;

    const [children, setChildren] = useState(props.children);

    const [isEnter, setIsEnter] = useState(false);

    const dragOver = ev => {
        ev.preventDefault();
        // 添加效果
        ev.dataTransfer.dropEffect = dropEffect;
        // console.log('dragOver',ev.target)
    }
    const dragEnter = ev => {
        ev.dataTransfer.dropEffect = dropEffect;
        // console.log('dragEnter',ev.target.className)
        setIsEnter(true);
    }

    const dragLeave = ev => {
        // console.log('dragLeave',ev.target.className)
        setIsEnter(false);
    }


    const drop = ev => {
        // 获取数据
        ev.dataTransfer.dropEffect = dropEffect;
        let droppedItem = ev.dataTransfer.getData('data');
        try {
            droppedItem = JSON.parse(droppedItem)
        } catch (e) {
            droppedItem = droppedItem;
        }
        setIsEnter(false);
        if (droppedItem && onDropped) {
            // 触发回调函数
            const newItem  = onDropped(droppedItem);
            if (children) {
                if (children instanceof Array) {
                    let newChildren = children.push(newItem);
                    setChildren(newChildren);
                } else {
                    setChildren([children,newItem])
                }
            } else {
                setChildren(newItem)
            }
        }
    }

    return (
        <div onDragOver={dragOver} className='dropTarget' style={isEnter ? dragEnterClass : defaultClass} onDrop={drop} onDragEnter={dragEnter} onDragLeave={dragLeave}>
            {children}
        </div>
    )
}


const DropArrayTarget = (props) => {
    const {
        onDropped,
        onDrag,
        dragEnterClass
    } = props;

    useEffect(() => {
    }, [])

    return (
        <div >
        </div>
    )
}


export const All = "all";
export const Move = "move";
export const Copy = "copy";
export const Link = "link";
export const CopyOrMove = "copyMove";
export const CopyOrLink = "copyLink";
export const LinkOrMove = "linkMove";
export const None = "none";

Drag.defaultProps = {
    effectAllowed: Move, // 设置默认的效果
};

DropTarget.defaultProps = {
    dragEnterClass: {
        height: 24,
        border: "1px solid black",
        BackgroundColor: "hsv(0, 0, 96%)"
    },
    dropEffect: Move
}
DropArrayTarget.defaultProps = {

}

const Dnd = {

}

export default Dnd;





